<template>
	<view>
		<view class="main-item" v-for="(item,index) in list">
			<view class="item-top flex">
				<view class="top-left flex">
					<text>{{item.title}}</text>
					<span>共{{item.titleNum}}题</span>
				</view>
			</view>
			<view class="main-show flex">
				<view class="show-left">
					<text>答卷人数:</text>
					<span>{{item.djNum}}</span>
				</view>
				<view class="show-right">
					<text>有效答卷数:</text>
					<span>{{item.yxNum}}</span>
				</view>
			</view>
			<view class="item-name">发布人:{{item.name}}</view>
			<view class="item-content">{{item.content}}</view>
			<view class="item-bottom flex">
				<view class="bottom-left">
					<text>创建时间:</text>
					<span>{{item.createtime}}</span>
				</view>
				<view class="bottom-left">
					<text>结束时间:</text>
					<span>{{item.endtime}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: "问题一",
					titleNum: 10,
					djNum: 10,
					yxNum: 10,
					name:"某某某",
					content: "问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查",
					createtime: "2020-12-20 12:12",
					endtime: "2020-12-20 12:12"
				}, {
					title: "问题一",
					titleNum: 10,
					djNum: 10,
					yxNum: 10,
					name:"张三",
					content: "问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查",
					createtime: "2020-12-20 12:12",
					endtime: "2020-12-20 12:12"
				}, {
					title: "问题一",
					titleNum: 10,
					djNum: 10,
					yxNum: 10,
					name:"李四",
					content: "问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查问卷调查",
					createtime: "2020-12-20 12:12",
					endtime: "2020-12-20 12:12"
				}]
			};
		}
	}
</script>

<style lang="scss">
     page {
     	background: #F0F0F0;
     	font-family: PingFang SC;
     	font-weight: 500;
     }
     
     .main-item {
     	width: 690rpx;
     	margin: 30rpx auto;
     	border-radius: 5rpx;
     	background: #fff;
     	padding: 15rpx 20rpx;
     	box-sizing: border-box;
     
     	.item-top {
     		justify-content: space-between;
     
     		.top-left {
     			text {
     				font-size: 36rpx;
     				color: #333;
     				margin-right: 5rpx;
     			}
     
     			span {
     				font-size: 24rpx;
     				color: #666;
     			}
     		}
     
     		.top-right {
     			text {
     				width: 15rpx;
     				height: 15rpx;
     				display: inline-block;
     				background: #999;
     				border-radius: 50%;
     				margin-right: 5rpx;
     			}
     
     			span {
     				font-size: 20rpx;
     				color: #999;
     			}
     		}
     	}
     
     }
      .item-name{
     	 height:50rpx;
     	 line-height:40rpx;
     	 font-size:30rpx;
      }
     .main-show {
     	font-size: 30rpx;
     	margin: 10rpx 0;
     
     	.show-left {
     		margin-right: 30rpx;
     
     		text {
     			color: #333;
     			margin-right: 5rpx;
     		}
     
     		span {
     			color: #209FFC;
     		}
     	}
     
     	.show-right {
     		text {
     			color: #333;
     			margin-right: 5rpx;
     		}
     
     		span {
     			color: #209FFC;
     		}
     	}
     }
     
     .item-content {
     	display: -webkit-box;
     	-webkit-box-orient: vertical;
     	-webkit-line-clamp: 3;
     	overflow: hidden;
     	color: #999;
     	font-size: 24rpx;
     	line-height: 30rpx;
     }
     
     .item-bottom {
     	font-size: 20rpx;
     	line-height: 30rpx;
     	color: #666;
     	margin: 8rpx 0;
     
     	.bottom-left {
     		margin-right: 20rpx;
     	}
     }
</style>
